<template>
	<view style="padding: 20rpx;">
		<!-- 添加输入框区域 -->
		
		

		<!-- 智能体广场\大全 -->

		<Agent v-for="(agent,index) in agents" :key="index" :agent="agent" @selectAgent="toAgent"></Agent>



	</view>
</template>

<script>
	import {
		aiApi, chatApi
	} from '../../utils/api';
	import Agent from "@/components/Agent/Agent.vue";

	export default {
		components: {
			Agent
		},
		data() {
			return {
				bot_id: '',
				agents: [],
			}
		},
		onShow() {
			this.bot_id = '';
			this.getlists();
		},
		onLoad() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			});
		},
		computed: {

		},
		methods: {

			async getlists() {
				let res = await aiApi.getAllPulbicAgent();
				this.agents = res.data;
			},
			goChat() {
				if(!this.bot_id){
					return;
				}
				chatApi.getAgentInfo({bot_id:this.bot_id}).then((res)=>{
					if(res.success){
						uni.navigateTo({
							url: '/pages/chat/chat?id=' + this.bot_id
						})
					}else{
						uni.showModal({
							title:'提示',
							content:res.message,
							showCancel:false
						})
					}
				})
				
			},
			toAgent(agent) {
				uni.navigateTo({
					url: `/pages/chat/chat?id=${agent.bot_id}&name=${agent.bot_name}`
				})
			}
		}
	}
</script>

<style scoped>
	.agent-grid {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.agent-card {
		padding: 30rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.agent-card:active {
		transform: scale(0.98);
	}

	.agent-card.premium {
		background: linear-gradient(45deg, #ffffff, #f0f9f6);
		border: 1px solid rgba(61, 192, 124, 0.1);
	}

	.agent-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.agent-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 24rpx;
		border: 4rpx solid #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.agent-meta {
		flex: 1
	}

	.name-wrap {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 8rpx;
	}

	.agent-name {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}

	.premium-tag {
		background: rgba(255, 215, 0, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.agent-desc {
		font-size: 26rpx;
		color: #666;
		display: block;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.agent-stats {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		font-size: 24rpx;
		color: #999;
	}

	.input-section {
		position: relative;
		margin: 20rpx 0 40rpx;
	}

	.vid-input {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 120rpx 0 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.placeholder-style {
		color: #999;
	}



	.arrow-btn {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 80rpx;
		height: 80rpx;
		background: #00C853;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
	}
</style>